<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kogito Travel Agency</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" role="main">
    <div class="jumbotron">
        <h1>Kogito Travel Agency</h1>

        <p>Plan your next trip with Kogito Travel Agency, it's easy and fast!</p>
    </div>
    <div class="page-header">
        <div class="btn-group pull-right" role="group" style="padding-top: 10px;">
            <button class="btn btn-primary" onclick="load();">
                <span class="glyphicon glyphicon-refresh"></span> Refresh
            </button>
            <button class="btn btn-primary product-add" data-action="add" data-toggle="modal"
                    data-target="#productModal">
                <span class="glyphicon glyphicon-plus"></span> Plan new trip
            </button>
        </div>
        <h1>Travels</h1>
    </div>
    <div class="row">
        <div class="col-md-12">

            <table class="table">
                <thead>
                <tr>
                    <th>Traveller name</th>
                    <th>Destination</th>
                    <th>Dates</th>
                    <th>Visa required</th>
                    <th>Hotel</th>
                    <th>Flight</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody id="content">
                <!-- filled using Ajax -->
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
<script>
    var graphql = __GRAPHIQL_ENDPOINT__;

    $(function () {
        $.ajaxSetup({
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        });
        $(function () {
            $("#tripBegin").datepicker({
                dateFormat: "yy-mm-dd"
            });
            $("#tripEnd").datepicker({
                dateFormat: "yy-mm-dd"
            });
        });
        load();
        initModal();
    });

    function create(travelRequest) {
        $.post("/travels", travelRequest, function () {
            load();
        }, "json");
    }

    function remove(id) {
        $.ajax({
            method: "DELETE",
            url: "/travels/" + id
        }).done(function () {
            load();
        });
    }

    function submitVisaApplication() {

        var application = {
            country: $("#visa_destinationCountry").val(),
            city: $("#visa_destinationCity").val(),
            firstName: $("#visa_firstName").val(),
            lastName: $("#visa_lastName").val(),
            duration: Number($("#visa_duration").val()),
            passportNumber: $("#visa_passportNumber").val(),
            nationality: $("#visa_nationality").val()
        };
        var visaApplicationRequest = JSON.stringify({visaApplication: application});

        $.post("/travels/" + $("#visa_p_id").val() + "/VisaApplication/" + $("#visa_t_id").val(), visaApplicationRequest, function () {
            load();
        }, "json");
    }

    function completeTask(id, taskName, taskId) {
        $.post("/travels/" + id + "/" + taskName + "/" + taskId, JSON.stringify({}), function () {
            load();
        }, "json");
    }

    function load() {
        $("#content").children().remove();
        var query = "{ \"query\": \"" +
                "{ Travels { " +
                "id " +
                "traveller { lastName, firstName, email, nationality } " +
                "trip { city, country, begin, end, visaRequired } " +
                "hotel { name, bookingNumber, phone, address { street } } " +
                "flight { flightNumber, departure, arrival } " +
                "metadata { processInstances { state } } " +
                "}}\"" +
                "}";
        $.ajax({
            type: 'POST',
            url: graphql,
            data: query,
            success: function (data) {
                $.each(data.data["Travels"], function (key, val) {
                    var active = $.grep(val.metadata.processInstances, function (pi) {
                        return pi.state == "ACTIVE"
                    }).length > 0;
                    var html =
                            "<tr class='" + (active ? "" : "active") + "'><td>" + val.traveller.lastName + ", " + val.traveller.firstName + "</td>" +
                            "<td>" + val.trip.country + ", " + val.trip.city + "</td>" +
                            "<td>" + new Date(val.trip.begin).toLocaleDateString() + " - " + new Date(val.trip.end).toLocaleDateString() + "</td>" +
                            "<td>" + (val.trip.visaRequired ? 'Yes' : 'No') + "</td>" +
                            "<td>" + (val.hotel != null ? val.hotel.name : '') + "</td>" +
                            "<td>" + (val.flight != null ? val.flight.flightNumber : '') + "</td>" +
                            "<td>" +
                            "<button class='btn btn-primary btn-sm' " +
                            "data-toggle='modal' " +
                            "data-target='#detailsModal' " +
                            "data-firstname='" + val.traveller.firstName + "' " +
                            "data-lastname='" + val.traveller.lastName + "' " +
                            "data-email='" + val.traveller.email + "' " +
                            "data-nationality='" + val.traveller.nationality + "' " +
                            "data-country='" + val.trip.country + "' " +
                            "data-city='" + val.trip.city + "' " +
                            "data-begin='" + new Date(val.trip.begin).toLocaleDateString() + "' " +
                            "data-end='" + new Date(val.trip.end).toLocaleDateString() + "' " +
                            "data-hotelname='" + (val.hotel != null ? val.hotel.name : "") + "' " +
                            "data-address='" + (val.hotel != null ? val.hotel.address.street : "") + "' " +
                            "data-bookingnumber='" + (val.hotel != null ? val.hotel.bookingNumber : "") + "' " +
                            "data-phone='" + (val.hotel != null ? val.hotel.phone : "") + "' " +
                            "data-flightnumber='" + (val.flight != null ? val.flight.flightNumber : "") + "' " +
                            "data-arrival='" + (val.flight != null ? new Date(val.flight.arrival).toLocaleString() : "") + "' " +
                            "data-departure='" + (val.flight != null ? new Date(val.flight.departure).toLocaleString() : "") + "' " +
                            "data-id='" + val.id + "'>" +
                            "   <span>Details</span>" +
                            "</button>&nbsp;";
                    if (active) {
                        html +=
                                "<button class='btn btn-primary btn-sm' " +
                                "data-toggle='modal' " +
                                "data-target='#tasksModal' " +
                                "data-firstname='" + val.traveller.firstName + "' " +
                                "data-lastname='" + val.traveller.lastName + "' " +
                                "data-id='" + val.id + "'>" +
                                "   <span>Tasks</span>" +
                                "</button>&nbsp;" +
                                "<button class='btn btn-danger btn-sm product-delete' data-id='" + val.id + "'>" +
                                "   <span>Cancel</span>" +
                                "</button>";
                    }
                    html += "</td></tr>";
                    $(html).appendTo("#content");
                });
                initCallbacks();
            }
        });
    }

    function initCallbacks() {
        $(".product-delete").unbind().click(function () {
            var id = $(this).data("id");
            remove(id);
        });

    }

    function initModal() {
        $("#productModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var productAction = $("#productAction");
            productAction.unbind();
            var modal = $(this);
            modal.find('.modal-title').text("Plan new trip");
            modal.find('#firstName').val("");
            modal.find('#lastName').val("");
            modal.find('#email').val("");
            modal.find('#nationality').val("");

            modal.find('#street').val("");
            modal.find('#city').val("");
            modal.find('#zipCode').val("");
            modal.find('#country').val("");

            modal.find('#destinationCountry').val("");
            modal.find('#destinationCity').val("");
            modal.find('#tripBegin').val("");
            modal.find('#tripEnd').val("");

            productAction.click(function () {

                var address = {
                    street: $("#street").val(),
                    city: $("#city").val(),
                    zipCode: $("#zipCode").val(),
                    country: $("#country").val()
                };
                var traveller = {
                    firstName: $("#firstName").val(),
                    lastName: $("#lastName").val(),
                    email: $("#email").val(),
                    nationality: $("#nationality").val(),
                    address: address
                };
                var trip = {
                    country: $("#destinationCountry").val(),
                    city: $("#destinationCity").val(),
                    begin: $("#tripBegin").val() + 'T00:00:00.000+02:00',
                    end: $("#tripEnd").val() + 'T00:00:00.000+02:00'
                };
                var travelRequest = JSON.stringify({traveller: traveller, trip: trip});

                create(travelRequest);
                $('#productModal').modal('toggle');
            });

        })

        $("#detailsModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var modal = $(this);
            modal.find('.modal-title').text("Details of travel for " + button.data("lastname") + ", " + button.data("firstname"));
            modal.find('#firstName').val(button.data("firstname"));
            modal.find('#lastName').val(button.data("lastname"));
            modal.find('#email').val(button.data("email"));
            modal.find('#nationality').val(button.data("nationality"));

            modal.find('#destinationCountry').val(button.data("country"));
            modal.find('#destinationCity').val(button.data("city"));
            modal.find('#tripBegin').val(button.data("begin"));
            modal.find('#tripEnd').val(button.data("end"));

            modal.find('#hotelname').val(button.data("hotelname"));
            modal.find('#bookingNumber').val(button.data("bookingnumber"));
            modal.find('#address').val(button.data("address"));
            modal.find('#phone').val(button.data("phone"));

            modal.find('#flightNumber').val(button.data("flightnumber"));
            modal.find('#departure').val(button.data("departure"));
            modal.find('#arrival').val(button.data("arrival"));
        })

        $("#tasksModal").on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var action = button.data('action');
            var id = button.data('id');
            var modal = $(this);
            modal.find('.modal-title').text("Tasks for " + button.data("lastname") + ", " + button.data("firstname"));

            $("#taskscontent").children().remove();
            $.getJSON("/travels/" + id + "/tasks", function (data) {
                $.each(data, function (key, val) {

                    if ("VisaApplication" == val) {
                        $("<tr><td>" + val + "</td>" +
                                "<td>" +
                                "<button class='btn btn-primary btn-sm' " +
                                "data-dismiss=\"modal\" " +
                                "data-toggle='modal' " +
                                "data-target='#visaApplicationModal' " +
                                "data-id='" + id + "' " +
                                "data-taskid='" + key + "'>" +
                                "   <span>Apply</span>" +
                                "</button>" +
                                "</td>" +
                                "</tr>").appendTo("#taskscontent");
                    } else {
                        $("<tr><td>" + val + "</td>" +
                                "<td>" +
                                "<button class='btn btn-primary btn-sm' onclick=\"completeTask('" + id + "', '" + val + "', '" + key + "')\" data-dismiss=\"modal\" " +
                                "   <span>Complete</span>" +
                                "</button>" +
                                "</td>" +
                                "</tr>").appendTo("#taskscontent");
                    }
                });

            })

            $("#visaApplicationModal").on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);

                var id = button.data('id');
                var taskid = button.data('taskid');
                var modal = $(this);
                modal.find('.modal-title').text("Visa application");

                $.getJSON("/travels/" + id + "/VisaApplication/" + taskid, function (data) {

                    $("#visa_firstName").val(data.traveller.firstName);
                    $("#visa_lastName").val(data.traveller.lastName);
                    $("#visa_email").val(data.traveller.email);
                    $("#visa_nationality").val(data.traveller.nationality);

                    $("#visa_destinationCity").val(data.trip.city);
                    $("#visa_destinationCountry").val(data.trip.country);
                    $("#visa_tripBegin").val(data.trip.begin);
                    $("#visa_tripEnd").val(data.trip.end);

                    $("#visa_p_id").val(id);
                    $("#visa_t_id").val(taskid);

                    $("#visa_passportNumber").val('');
                    $("#visa_duration").val('');
                });

            })
        })
    }
</script>
<div class="modal fade" id="productModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="productModalTitle">Plan new trip</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <h3>Traveller</h3>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label for="firstName">First Name</label> <input type="text"
                                                                                 class="form-control" id="firstName" name="firstName" required>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Last Name</label> <input type="text"
                                                                               class="form-control" id="lastName" name="lastName" required>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label> <input type="text"
                                                                        class="form-control" id="email" name="email" required>
                            </div>
                            <div class="form-group">
                                <label for="nationality">Nationality</label>
                                <select class="form-control" id="nationality"
                                        name="nationality">
                                    <option value="Brazilian">Brazilian</option>
                                    <option value="Polish">Polish</option>
                                    <option value="US">US</option>
                                    <option value="German">German</option>
                                </select>
                            </div>

                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <label for="street">Street</label> <input type="email"
                                                                          class="form-control" id="street" name="street" required>
                            </div>
                            <div class="form-group">
                                <label for="city">City</label> <input type="text"
                                                                      class="form-control" id="city" name="city" required>
                            </div>
                            <div class="form-group">
                                <label for="zipCode">Zip code</label> <input type="text"
                                                                             class="form-control" id="zipCode" name="zipCode" required>
                            </div>
                            <div class="form-group">
                                <label for="country">Country</label>
                                <select class="form-control" id="country" name="country">
                                    <option value="Brazil">Brazil</option>
                                    <option value="Poland">Poland</option>
                                    <option value="US">US</option>
                                    <option value="Germany">Germany</option>
                                </select>
                            </div>
                        </div>

                        <h3>Trip</h3>
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <label for="destinationCountry">Country</label> <input type="text"
                                                                                       class="form-control" id="destinationCountry" name="destinationCountry" required>
                            </div>
                            <div class="form-group">
                                <label for="destinationCity">City</label> <input type="text"
                                                                                 class="form-control" id="destinationCity" name="destinationCity" required>
                            </div>
                            <div class="form-group">
                                <label for="tripBegin">Begin at</label> <input type="text"
                                                                               class="form-control" id="tripBegin" name="tripBegin" required>
                            </div>
                            <div class="form-group">
                                <label for="tripEnd">End at</label> <input
                                    type="text" class="form-control" id="tripEnd"
                                    name="tripEnd" required>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">Cancel
                            </button>
                            <button type="button" id="productAction" class="btn btn-primary">Book your trip</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Traveller</h3>
                            </div>
                            <div class="form-group">
                                <label for="firstName">First Name</label> <input type="text"
                                                                                 class="form-control" id="firstName" name="firstName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="lastName">Last Name</label> <input type="text"
                                                                               class="form-control" id="lastName" name="lastName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label> <input type="text"
                                                                        class="form-control" id="email" name="email" readonly>
                            </div>
                            <div class="form-group">
                                <label for="nationality">Nationality</label> <input
                                    type="text" class="form-control" id="nationality"
                                    name="form-control" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Trip</h3>
                            </div>
                            <div class="form-group">
                                <label for="destinationCountry">Country</label> <input type="text"
                                                                                       class="form-control" id="destinationCountry" name="destinationCountry" readonly>
                            </div>
                            <div class="form-group">
                                <label for="destinationCity">City</label> <input type="text"
                                                                                 class="form-control" id="destinationCity" name="destinationCity" readonly>
                            </div>
                            <div class="form-group">
                                <label for="tripBegin">Begin at</label> <input type="text"
                                                                               class="form-control" id="tripBegin" name="tripBegin" readonly>
                            </div>
                            <div class="form-group">
                                <label for="tripEnd">End at</label> <input
                                    type="text" class="form-control" id="tripEnd"
                                    name="tripEnd" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Hotel</h3>
                            </div>
                            <div class="form-group">
                                <label for="hotelname">Name</label> <input type="text"
                                                                           class="form-control" id="hotelname" name="hotelname" readonly>
                            </div>
                            <div class="form-group">
                                <label for="bookingNumber">Booking Number</label> <input type="text"
                                                                                         class="form-control" id="bookingNumber" name="bookingNumber" readonly>
                            </div>
                            <div class="form-group">
                                <label for="address">Address</label> <input type="text"
                                                                            class="form-control" id="address" name="address" readonly>
                            </div>
                            <div class="form-group">
                                <label for="phone">Phone</label> <input type="text"
                                                                        class="form-control" id="phone" name="phone" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Flight</h3>
                            </div>
                            <div class="form-group">
                                <label for="flightNumber">Flight number</label> <input type="email"
                                                                                       class="form-control" id="flightNumber" name="flightNumber" readonly>
                            </div>
                            <div class="form-group">
                                <label for="departure">Departure</label> <input type="text"
                                                                                class="form-control" id="departure" name="departure" readonly>
                            </div>
                            <div class="form-group">
                                <label for="arrival">Arrival</label> <input type="text"
                                                                            class="form-control" id="arrival" name="arrival" readonly>
                            </div>
                            <div class="form-group">
                                &nbsp;
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="tasksModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Details of a travel</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">

                        <div class="col-md-12">
                            <h1>Tasks</h1>
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Task name</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody id="taskscontent">
                                <!-- filled using Ajax -->
                                </tbody>
                            </table>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="visaApplicationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                <h4 class="modal-title" id="detailsModalTitle">Visa application</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <input type="hidden" id="visa_p_id"/>
                        <input type="hidden" id="visa_t_id"/>
                        <div class="col-md-12">
                            <h1>Visa application</h1>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Traveller</h3>
                            </div>
                            <div class="form-group">
                                <label for="visa_firstName">First Name</label> <input type="text"
                                                                                      class="form-control" id="visa_firstName" name="visa_firstName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_lastName">Last Name</label> <input type="text"
                                                                                    class="form-control" id="visa_lastName" name="visa_lastName" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_email">Email</label> <input type="text"
                                                                             class="form-control" id="visa_email" name="visa_email" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_nationality">Nationality</label> <input
                                    type="text" class="form-control" id="visa_nationality"
                                    name="visa_nationality" readonly>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Trip</h3>
                            </div>
                            <div class="form-group">
                                <label for="visa_destinationCountry">Country</label> <input type="text"
                                                                                            class="form-control" id="visa_destinationCountry" name="visa_destinationCountry" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_destinationCity">City</label> <input type="text"
                                                                                      class="form-control" id="visa_destinationCity" name="visa_destinationCity" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_tripBegin">Begin at</label> <input type="text"
                                                                                    class="form-control" id="visa_tripBegin" name="visa_tripBegin" readonly>
                            </div>
                            <div class="form-group">
                                <label for="visa_tripEnd">End at</label> <input
                                    type="text" class="form-control" id="visa_tripEnd"
                                    name="visa_tripEnd" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <div class="form-group">
                                <h3>Visa details</h3>
                            </div>
                            <div class="form-group">
                                <label for="visa_passportNumber">Passport number</label> <input type="text"
                                                                                                class="form-control" id="visa_passportNumber" name="visa_passportNumber">
                            </div>
                            <div class="form-group">
                                <label for="visa_duration">Duration</label> <input type="text"
                                                                                   class="form-control" id="visa_duration" name="visa_duration">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submitVisaApplication()">Submit application</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>